Node.jsベースのCMS calipsoを動かしてみる

#Node.js

#JavaScript

津熊弘和

2014.06.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

表題の通りですが、インストールして動かすにあたって若干ハマったところがありますので、備忘録として残しておきたいと思います。
(WYSIWYGエディタの組み込み方法とRole設定追加後の編集で落ちるの回避方法）

動作環境

記載時点のバージョンは下記の通りになります。

MacOS X 10.8.5
Node.js 0.10.29
npm 1.4.16
mongodb 2.4.10
calipso 0.3.50

インストール＆セットアップ

calipsoのインストールは非常に簡単ですが、前準備としてNode.js,mongodb,npmを先にインストールしておく必要がありますのでインストールしておきましょう
下記の/Library/WebServer/Documents/MySiteは適宜変更して下さい。

$ sudo npm install calipso -g
$ sudo calipso site /Library/WebServer/Documents/MySite
$ cd /Library/WebServer/Documents/MySite
$ calipso server

calipsoをバックグラウンド起動する場合はcalipso server server.port=3000 &で可能です。

calipsoサーバーを起動するした後にブラウザを起動してURLに http://127.0.0.1:3000 を入力して、calipsoにアクセスします。そうすると下記の様な画面に入って初回アクセス時のセットアップ画面が表示されます。

コマンド起動したウィンドウにInstallation Passwordが表示されるので、Installation Passwordをコピーをして、貼付けます

Installation Passwordの入力が成功すると次画面が表示されますので Create Database をクリックします。(mongodbは事前に起動させておいて下さい）

次にDB作成が成功すると下記の画面が表示されますので、Adminユーザの情報を入力してCreate Admin をクリックします。

最後に下記の様にモジュールの選択画面が表示されますので必要なものにチェックをつけてセットアップを完了させます。（当方はAloha Text Editorをチェックしました。）

完了すると下記画面に遷移します。

これでインストール＆セットアップは完了です。

スキンを変えてみる

先ほどセットアップ画面で作成したAdminユーザでログインして、メニューにある ADMINISTRATION / Core / Configuration を選んでThemeの Frontend Theme と Admin Theme のところをcleanslateからcalipsoに変更してみます。

見覚えのあるスキンになりました。

コンテンツを登録してみる

CONTENT MANAGEMENTメニューからコンテンツを選択すると現在登録されているコンテンツの一覧が表示されます。

左側にある Create ボタンをクリックして、コンテンツのタイプを選択して Next ボタンックをクリックします。

するとCMSにありがちな画面が表示されますので、必要な部分に入力して登録します。

ただ・・・この状態だとHTMLタグを自身で入れて書く必要があり、コンテンツ登録の敷居が一気に上がってしまいます。そこでWYSIWYGエディタを組み込むことにします。

calipsoにWYSIWYGエディタを組み込む

CMSにつきもののWYSIWYGエディタがデフォルトでは入ってない？ようなので、ここではTINYMCEを組み込んでみます。
TINYMCEのページでTinyMCE 4.1.0を/tmpにダウンロードしました。

$ cd /tmp
$ unzip tinymce_4.1.0.zip
$ cd tinymce
$ cd js
$ sudo cp -rp tinymce /Library/WebServer/Documents/MySite/themes/downloaded/calipso/public/js
$ cd /Library/WebServer/Documents/MySite ←calipso site コマンドで指定したパス
$ cd themes/downloaded/calipso/templates/
$ sudo vi default.html

default.htmlの</body>の下にtinymce.initを追加します

</body>
<script type="text/javascript" src="/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    theme: "modern",
    width: 850,
    plugins: [
         "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons template paste textcolor"
   ],
   content_css: "css/content.css",
   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",
   style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ]
 });
</script>
<%- scripts %>
</html>

編集が終わったらdefault.htmlを保存して、calipsoサーバを再起動します。

CONTENT MANAGEMENTメニューからコンテンツを選択して、左側にある Create ボタンをクリックしてコンテンツタイプを選択して Next をクリックします。すると下記画面のようにWYSIWYGエディタが出てきます。

Aloha Rich Text EditorもModuleで有効にしてあるので、ログインした状態でTOPページにアクセスすると黄色い枠が表示されるブロックは直感的にコンテンツの編集ができます。

下記は編集状態の画面

calipso管理画面でRoleを追加してみる

インストール直後はAdministrator、Contributor、Guestの３つが定義されていますが、独自のRoleを追加してみようと思い、適当に２つほどRoleを追加しました。

次に登録したサンプル１のリンクをクリックして再編集しようとすると・・・下記のエラーがコンソールに出てNodeが落ちてしまいます。

30 Jun 19:26:16 - error: Attempting to add menu item with invalid params, please update your module for the 0.3.0 api, path: return

/Library/WebServer/Documents/MySite/node_modules/mongoose/lib/utils.js:419
        throw err;
              ^
TypeError: Cannot read property 'permit' of undefined
    at CalipsoMenu.addMenuItem (/Library/WebServer/Documents/MySite/lib/core/Menu.js:83:14)
    at finish (/Library/WebServer/Documents/MySite/modules/core/user/user.js:245:29)
    at Promise.<anonymous> (/Library/WebServer/Documents/MySite/modules/core/user/user.js:273:7)
    at Promise.<anonymous> (/Library/WebServer/Documents/MySite/node_modules/mongoose/node_modules/mpromise/lib/promise.js:162:8)
    at Promise.emit (events.js:95:17)
    at Promise.emit (/Library/WebServer/Documents/MySite/node_modules/mongoose/node_modules/mpromise/lib/promise.js:79:38)
    at Promise.fulfill (/Library/WebServer/Documents/MySite/node_modules/mongoose/node_modules/mpromise/lib/promise.js:92:20)
    at /Library/WebServer/Documents/MySite/node_modules/mongoose/lib/query.js:1833:13
    at model.Document.init (/Library/WebServer/Documents/MySite/node_modules/mongoose/lib/document.js:251:11)
    at completeOne (/Library/WebServer/Documents/MySite/node_modules/mongoose/lib/query.js:1831:10)

これを回避するためにuser.jsを修正します。

$ cd /Library/WebServer/Documents/MySite/modules/core/user ←インストールしたディレクトリに適宜変更して下さい。
$ vi user.js

245行目の記述

res.menu.adminToolbar.addMenuItem({name:'Delete Role', path:'return', url:'/admin/roles/' + role._id + '/delete', description:'Delete role ...', security:[], icon:"icon-close"});

を

res.menu.adminToolbar.addMenuItem(req,{name:'Delete Role', path:'return', url:'/admin/roles/' + role._id + '/delete', description:'Delete role ...', security:[], icon:"icon-close"});

としてaddMenuItemの引数に req を追加します。
これで再度calipso serverを起動してRoleの編集してみると無事編集画面が開きます。